import React, { FC } from "react";
import styles from './common.module.scss'
import { Input, Empty, Spin } from 'antd'
import ListPage  from '../../components/ListPage'
import { SearchOutlined, CaretUpFilled } from '@ant-design/icons';
import QuestionCard from "../../components/QuestionCard";
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData'
import { JSX } from "react/jsx-runtime";


const Star: FC = () => {
    const { data = {}, loading } = useLoadQuestionListData({ isStar: true })
    const { list = [], total = 0 } = data
    return <>

        <div className={styles.header}>
            <div className={styles.left}>
                <span>星标问卷</span>
            </div>
            <div className={styles.right}>
                <span className={styles.order}>
                    <span>时间倒叙<CaretUpFilled /></span>
                    <span>状态<CaretUpFilled /></span>
                </span>
                <Input
                    className={styles.input}
                    placeholder="请输入问卷名进行搜索"
                    suffix={<SearchOutlined className="site-form-item-icon" />}
                />
            </div>
        </div>
        <Spin spinning={loading}>
            <div className={styles.content}>
                {list.length === 0 && loading == false && <Empty />}
                {list.length > 0 && list.map((q: JSX.IntrinsicAttributes & { _id: string; title: string; isStar: boolean; isPublished: boolean; answerCount: number; createdAt: string; }) => {
                    const { _id } = q
                    return <QuestionCard key={_id} {...q} />
                })}
            </div>
            <div className={styles.footer}>
                {list.length > 0 && <ListPage total={total}></ListPage>}
            </div>
        </Spin>
    </>
}

export default Star